import { useState } from 'react'
import './index.css'
const count1 = 100

function getName () {
  return 'jack'
}

const list = [
  {
    id: 1,
    name: 'tom1',
    age: 20
  },
  {
    id: 2,
    name: 'tom2',
    age: 22
  },
  {
    id: 3,
    name: 'tom3',
    age: 23
  },
]

const isLogin = true

const articleType = 3 // 0 1 3
// 根据文章类型返回不同模板
function getArticleTem () {
  if(articleType == 0) {
    return <div> 无图文章</div>
  } else if(articleType == 1) {
    return <div>单图模式</div>
  } else {
    return <div>三图模式</div>
  }
}

// 定义组件
function Button () {
  // 业务逻辑组件逻辑
  return <button>click</button>
}

const Button2 = () => {
  return <button>click2</button>
}











function App() {

  // 事件参数
  const handler = function (e) {
    console.log('btn被点击', e)
    alert('btn被点击')
  }

  const handler2 = (name) => {
    alert(name)
  }

  const handler3 = (name, e) => {
    console.log(name, e)
  }

  // useState
  const [count, setCount ] = useState(0)
  const handler4 = () => {
    // 作用: 
    // 1. 用传入的新值修改count
    // 2. 重新使用新的coun渲染ui
    setCount(count + 1)
  }

  // 修改对象状态
  const [ form,setForm ] = useState({
    name: 'tom',
    age: 30
  })

  const changeForm = () => {
    setForm({
      ...form,
      name:'jry',
      age: 99,
      sex: '男'
    })
  }

  const style = {
    color: 'blue', 
    fontSize: '28px'
  }







  return (
    <div>
      this is App
      {/* 使用引号传递字符串 */}
      {'this is message'}

      {/* 识别js变量 */}
      {count1}

      {/* 函数调用 */}
      {getName()}

      {/* 方法调用 */}
      { new Date().getDate() }

      {/* 使用js对象 */}
      <div style={{color: 'red'}}>this is div</div>

      {/* 列表渲染 */}
      {/* map 循环哪个结构 retuen结构 */}
      {/* 加上一个独一无二的key值 字符串或number*/}
      {/* key作用: React框架内部使用 提升更新性能 */}
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>

      {/* 逻辑与 */}
      {isLogin && <span>登录成功</span>}

      {/* 三元运算 */}
      {isLogin? <span>登录ok</span>:<span>未登录</span>}

      {/* 复杂条件渲染 */}
      {getArticleTem()}

      {/* 事件绑定 */}
      <button onClick={handler}>点击按钮</button>

      {/* 传递自定义参数 */}
      <button onClick={() => handler2('jack')}>自定义传参</button>

      {/* 同时传递事件参数和自定义参数 */}
      <button onClick={(e) => handler3('tom', e)}>同时传递事件参数和自定义参数</button>

      {/* 组件引用 */}
      <Button2/>
      <Button></Button>

      {/* useState */}
      <div>count: {count}</div>
      <button onClick={handler4}>count++</button>
      <div>obj: {form.name}</div>
      <button onClick={changeForm}>修改状态</button>

      {/* 行内样式控制 */}
      <span style={{color: 'red', fontSize: '22px'}}>红色的字</span>
      <span style={style}>红色的字</span>

      {/* 通过class类名控制 */}
      <span className='foo'>this is class foo</span>
    </div>
  )
}

export default App
